<template>
  <div>
    <el-table :data="data" border :height="height" style="width: 100%;">
      <el-table-column v-for="column in columns" :key="column"
                       :prop="column.prop"
                       :label="column.label"
                       :min-width="column.width">
        <template v-if="column.slot" v-slot="scope">
          <slot :name="column.prop" :row="scope.row">
          </slot>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" :width="operateWidth">
        <template v-slot="scope">
          <slot name="operate" :row="scope.row">
          </slot>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        style="margin-top: 10px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        background
        :total="totalRecord">
    </el-pagination>
  </div>
</template>

<script>
import {ref} from 'vue'
export default {
  name: "TemplateTable",
  setup (props, content) {

    let pageSize = ref(10)
    let page = ref(props.currentPage)

    function handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      pageSize.value = val
      page.value = 1
      content.emit('callback' , 'setPageInfo', {page:page.value , pageSize:pageSize.value})
    }

    function handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      page.value = val
      content.emit('callback' , 'setPageInfo', {page:page.value , pageSize:pageSize.value})
    }

    return {
      page,
      pageSize,
      handleSizeChange,
      handleCurrentChange
    }
  },
  props: {
    columns: {
      type: Object,
      required: true,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: {}
    },
    data: {
      type: Object,
      required: true,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: {}
    },
    height: {
      type: String,
      default: '300px'
    },
    currentPage: {
      type: Number,
      default: 1
    },
    totalRecord: {
      type: Number
    },
    operateWidth: {
      type: Number,
    },
  },
}
</script>

<style scoped>

</style>
